<template>
	<view class="content">
		<view>
			<view class="bookinfo">
				<text class="booktitle">{{bookname}}</text>
				<image class="bookpic" :src="'https://www.yedushu.cn/' + bimg"></image>
			</view>
			<view class="tab">    
				<view class="tabItem" :class="{'active' : 0 == tab_current}" @click="clickTab(0)">
					<text :class="{'borderline' : 0 == tab_current}">想读</text>
				</view>
				<view class="tabItem" :class="{'active' : 1 == tab_current}" @click="clickTab(1)">
					<text :class="{'borderline' : 1 == tab_current}">在读</text>
				</view>
				<view class="tabItem" :class="{'active' : 2 == tab_current}" @click="clickTab(2)">
					<text :class="{'borderline' : 2 == tab_current}">读过</text>
				</view>
			</view>
			<view class="itemcar" v-show="tab_current == 0">
				<!-- 标记想读评分 -->
				<scroll-view class="xiangdu">
					<view class="text-area">
						<textarea v-model="xiangdu_memo" class="textarea" auto-height="true" placeholder="记录一下想读的理由..." placeholder-class="placeholder"/>
					</view>
					<view class="barea">
						<button @click="xiangdu_save()" class="button"><text class="fonttxt">确定</text></button>
					</view>
				</scroll-view>
			</view>
			<view class="itemcar" v-show="tab_current == 1">
				<!-- 标记在读评分 -->
				<scroll-view class="zaidu">
					<view class="tishi">
						<text class="tishitxt">{{zaidu_tishi}}</text>
					</view>
					<view class="rate">
						<htz-rate v-model="zaidu_rate" @change="zaiduRate"></htz-rate>
					</view>
					<view class="text-area">
						<textarea v-model="zaidu_memo" class="textarea" auto-height="true" placeholder="说说你读过之后的感受吧..." placeholder-class="placeholder"/>
					</view>
					<view class="barea">
						<button @click="zaidu_save()" class="button"><text class="fonttxt">确定</text></button>
					</view>
				</scroll-view>
			</view>
			<view class="itemcar" v-show="tab_current == 2">
				<!-- 标记读过评分 -->
				<scroll-view class="duguo">
					<view class="tishi">
						<text class="tishitxt">{{duguo_tishi}}</text>
					</view>
					<view class="rate">
						<htz-rate v-model="duguo_rate" @change="duguoRate"></htz-rate>
					</view>
					<view class="text-area">
						<textarea v-model="duguo_memo" class="textarea" auto-height="true" placeholder="说说你读过之后的感受吧..." placeholder-class="placeholder"/>
					</view>
					<view class="barea">
						<button @click="duguo_save()" class="button"><text class="fonttxt">确定</text></button>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import htzRate from '@/components/htz-rate/htz-rate.vue'; // 导入评分插件
	export default {
		components: {
			htzRate,
		},
		data() {
			return {
				tab_current: 0, // 当前选项卡
				haslogin: false,
				userinfo: [],
				zaidu_rate: 0, // 在读初始星数
				zaidu_tishi: '点击星星评分',
				duguo_rate: 0, // 读过初始星数
				duguo_tishi: '点击星星评分',
				xiangdu_memo: '',
				zaidu_memo: '',
				duguo_memo: '',
				bookname: '',
				bookid: '',
				bimg: '',
				index: '',
			}
		},
		onLoad(option) {			
			if(option.readstate == 1)
			{
				// 想读
				this.tab_current = 0;
			}
			if(option.readstate == 2)
			{
				// 在读
				this.tab_current = 1;
			}
			if(option.readstate == 3)
			{
				// 读过
				this.tab_current = 2;
			}
			this.bookname = option.bookname;
			this.bookid = option.bookid;
			this.bimg = option.bimg;
			
			this.index = option.index;
			
			this.haslogin = uni.getStorageSync('haslogin');
			this.userinfo = uni.getStorageSync('userinfo');
			
			// 判断是否已标识评分
			this.getReadstate();
		},
		methods: { 
			// 切换选项卡
			clickTab(cur){
				this.tab_current = cur;
			},
			zaiduRate(ratenum) {
				this.zaidu_rate = ratenum;
				if(ratenum == 1)
				{
					this.zaidu_tishi = '很差';
				}
				if(ratenum == 2)
				{
					this.zaidu_tishi = '较差';
				}
				if(ratenum == 3)
				{
					this.zaidu_tishi = '还行';
				}
				if(ratenum == 4)
				{
					this.zaidu_tishi = '推荐';
				}
				if(ratenum == 5)
				{
					this.zaidu_tishi = '力荐';
				}
			},
			duguoRate(ratenum) {
				this.duguo_rate = ratenum;
				if(ratenum == 1)
				{
					this.duguo_tishi = '很差';
				}
				if(ratenum == 2)
				{
					this.duguo_tishi = '较差';
				}
				if(ratenum == 3)
				{
					this.duguo_tishi = '还行';
				}
				if(ratenum == 4)
				{
					this.duguo_tishi = '推荐';
				}
				if(ratenum == 5)
				{
					this.duguo_tishi = '力荐';
				}
			},
			xiangdu_save() {
				// 提交想读的评分内容
				if(!this.haslogin) {
					// 先判断是否登录，没登录跳转
					uni.navigateTo({
					    url: '../login/login'
					});
					return false;
				}
				uni.request({
				    url: 'https://www.yedushu.cn/api/setreadstate', 
				    data: {
				        bookid: this.bookid,
						uid: this.userinfo.uid,
						rating: 0,
						memo: this.xiangdu_memo,
						read_state: 1
				    },
					method: 'POST',
				    success: (res) => {
						// 内容提交成功，返回前一个页面
				        // console.log(res.data);
						// 触发书籍详情页上的事件
						uni.$emit("isxiangdu",{
								isxiangdu: true,
								iszaidu: false,
								isduguo: false
							},
						);
						// 触发书籍列表页上的事件
						uni.$emit("booklist",{
								index: this.index,
								readstate: 1, // 想读
							},
						);
						// 返回上一页
				        uni.navigateBack({
				            delta: 1
				        });
				    }
				});
			},
			zaidu_save() {
				// 提交想读的评分内容
				// console.log(storage_user_name);
				// console.log(storage_uid);
				if(!this.haslogin) {
					// 先判断是否登录，没登录跳转
					uni.navigateTo({
					    url: '../login/login'
					});
					return false;
				}
				uni.request({
				    url: 'https://www.yedushu.cn/api/setreadstate', 
				    data: {
				        bookid: this.bookid,
						uid: this.userinfo.uid,
						rating: this.zaidu_rate,
						memo: this.zaidu_memo,
						read_state: 2
				    },
					method: 'POST',
				    success: (res) => {
						// 内容提交成功，返回前一个页面
				        // console.log(res.data);
						// 触发书籍详情页上的事件
						uni.$emit("iszaidu",{
								isxiangdu: false,
								iszaidu: true,
								isduguo: false
							},
						);
						// 触发书籍列表页上的事件
						uni.$emit("booklist",{
								index: this.index,
								readstate: 2, // 在读
							},
						);
				        uni.navigateBack({
				            delta: 1
				        });
				    }
				});
			},
			duguo_save() {
				// 提交想读的评分内容
				if(!this.haslogin) {
					// 先判断是否登录，没登录跳转
					uni.navigateTo({
					    url: '../login/login'
					});
					return false;
				}
				uni.request({
				    url: 'https://www.yedushu.cn/api/setreadstate', 
				    data: {
				        bookid: this.bookid,
						uid: this.userinfo.uid,
						rating: this.duguo_rate,
						memo: this.duguo_memo,
						read_state: 3
				    },
					method: 'POST',
				    success: (res) => {
						// 内容提交成功，返回前一个页面
				        // console.log(res.data);
						// 触发书籍详情页上的事件
						uni.$emit("isduguo",{
								isxiangdu: false,
								iszaidu: false,
								isduguo: true
							},
						);
						// 触发书籍列表页上的事件
						uni.$emit("booklist",{
								index: this.index,
								readstate: 3, // 读过
							},
						);
				        uni.navigateBack({
				            delta: 1
				        });
				    }
				});
			},
			getReadstate() {
				// 判断书籍是否被标识读书状态和评分
				uni.request({
				    url: 'https://www.yedushu.cn/api/getreadstate', 
				    data: {
				        bookid: this.bookid,
						uid: 2
				    },
					method: 'GET',
				    success: (res) => {
						// 获得内容成功
				        // console.log(JSON.stringify(res.data));
						if(res.data != 1) // 已经评分过
						{
							this.xiangdu_memo = res.data.memo;
							this.zaidu_memo = res.data.memo;
							this.duguo_memo = res.data.memo;
							
							this.zaidu_rate = Number(res.data.rating);
							this.duguo_rate = Number(res.data.rating);
							
							if(res.data.rating == 1)
							{
								this.duguo_tishi = '很差';
								this.zaidu_tishi = '很差';
							}
							if(res.data.rating == 2)
							{
								this.duguo_tishi = '较差';
								this.zaidu_tishi = '较差';
							}
							if(res.data.rating == 3)
							{
								this.duguo_tishi = '还行';
								this.zaidu_tishi = '还行';
							}
							if(res.data.rating == 4)
							{
								this.duguo_tishi = '推荐';
								this.zaidu_tishi = '推荐';
							}
							if(res.data.rating == 5)
							{
								this.duguo_tishi = '力荐';
								this.zaidu_tishi = '力荐';
							}
						}
				    }
				});
			}			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}
	.tab{
	    width: 100%;
		padding: 10px 0 0 0;
	    display: flex;
	    align-items: center;
	    justify-content: center;
		border-bottom: 1px solid #f3f3f3;
		position: fixed;
		z-index: 100;
		background-color: #FFFFFF;
	}
	.tabItem{
	    width: 100%;
	    height: 25px;
	    line-height: 25px;
	    font-size: 15px;
	    text-align: center;
	    color: #666666;
	}
	.active{		
	    color: #000000;
	}
	.borderline {
		border-bottom: 2px solid #808080;
	}
	.itemcar {
		padding: 10px 20px;
	}
	.xiangdu{
		padding-top: 50px;
	}
	.zaidu{
		padding-top: 50px;
	}
	.duguo{
		padding-top: 50px;
	}
	.placeholder {
		font-size: 14px;
	}
	.text-area {
		display: flex;
		border: 1px #f0f0f0 solid;
		padding: 10px 10px;
		border-radius: 5px;
	}
	.textarea {
		flex: 1;
		justify-content: center;
		align-items: center;
		align-content: center;
		font-size: 14px;
		min-height: 60px;
	}
	.bookinfo {
		display: flex;
		flex-direction: column;
		padding: 10px 10px;
		align-items: center;
		
	}
	.bookinfo .booktitle {
		font-size: 16px;
		padding: 10px 10px;
	}
	.bookinfo .bookpic {
		width: 120px;
		height: 160px;
		padding-bottom: 10px;
	}
	.barea {
		padding: 10px 10px;
	}
	.button {
		background-color: #f28281;
	}
	.button .fonttxt {		
		font-size: 16px;
		color: #FFFFFF;
	}
	.rate {
		display: flex;
		justify-content: center;
		padding: 20px 0;
	}
	.tishi {
		display: flex;
		justify-content: center;
	}
	.tishi .tishitxt {
		font-size: 10px;
		color: #494949;
	}
</style>
